<template>
  <div class="ProfileMyCls" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-row>
          <!-- 个人信息 -->
          <el-col :span="24">
            <div class="user_left_card">
              <div class="userinfo_card">
                <div class="top_img_div">
                  <div>
                    <el-avatar :size="100" :src="'data:image/jpeg;base64,'+$store.state.UserInfo.ImageData"></el-avatar>
                    <p>
                      <span name="userName">{{$store.state.UserInfo.FullName}}</span><br />
                      {{$store.state.UserInfo.DepartmentName_CHS}}(<span
                        style="color:#4E4F50;font-size:14px;">{{$store.state.UserInfo.PositionName}} </span>)
                    </p>
                  </div>
                </div>
                <div class="content_div">
                  我的消息
                </div>
                <div class="content_div">
                  我的邮件
                </div>
                <div class="content_div">
                  <el-button type="primary" icon="el-icon-edit" @click="AddMemo" size="small">写便签</el-button>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top:20px;">
            <div class="user_left_card">
              <div style="border-bottom:1px solid #EEEEEE;padding-bottom:5px;">
                基本信息
              </div>
              <div>
                <ul class="info_ul">
                  <li>
                    <p>
                      <span name="title"><i class="el-icon-s-cooperation"></i>&nbsp;学历</span><br />
                      <span name="content">{{$store.state.UserInfo.School}} {{$store.state.UserInfo.Education}}</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span name="title"><i class="el-icon-mobile-phone"></i>&nbsp;手机</span><br />
                      <span name="content">{{$store.state.UserInfo.Phone1}}</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span name="title"><i class="el-icon-location-outline"></i>&nbsp;地址</span><br />
                      <span name="content">{{$store.state.UserInfo.Address1}}</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      <span name="title"><i class="el-icon-edit"></i>&nbsp;签名</span><br />
                      <span name="content" v-if="!$store.state.UserInfo.Note.length">无签名</span>
                      <span name="content" v-else>{{$store.state.UserInfo.Note}}</span>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-col :span="24">
            <div>
              <el-tabs type="border-card">
                <el-tab-pane label="我的便签">
                  <el-row>
                    <el-col v-for="(item,index) in MemoInfo.MemoList" :key="index" :span="24">
                      <div class="Memo_Card">
                        <div class="Card_Top">
                          <el-row>
                            <el-col :span="22">
                              <el-row>
                                <el-col :span="24" class="Title">
                                  {{item.Title}}
                                </el-col>
                                <el-col :span="24">
                                  {{item.CreateDate|TimeFilter}}
                                </el-col>
                              </el-row>
                            </el-col>
                            <el-col :span="2">
                              <div style="float:right">
                                <i class="el-icon-close MemoClose" @click="DelMemo(item.pk_Memo,index)"></i>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="Card_Content">
                          <p>
                            {{item.Description}}
                          </p>
                        </div>
                        <div class="Card_Footer">
                          <el-row>
                            <el-col hidden :span="22">
                              <div>
                                <i class="el-icon-delete-solid"></i>
                              </div>
                            </el-col>
                            <el-col :span="2" :offset="22">
                              <div class="Footer_Edit" @click="MemoDialog=true,Memo={...item},Type='Edit'">
                                <i class="el-icon-edit-outline" style="margin-right:5px;"></i>
                                <span>修改</span>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row v-if="Object.keys(MemoInfo).length">
                    <el-col v-if="!MemoInfo.MemoList.length" :span="24">
                      <div class="NoMemo">
                        <h4>没有便签哦~</h4>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div style="float:left;font-size:14px;line-height:30px;color:#A6A6A6;">
                        <span>共{{MemoInfo.Count}}条便签</span>
                      </div>
                      <div style="float:right">
                        <el-pagination layout="prev, pager, next" :page-size="5" :current-page.sync="page"
                          :total="MemoInfo.Count">
                        </el-pagination>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="个人设置" class="MyConfig">
                  <div>
                    <el-form :rules="rules" :model="UserInfo" ref="UserInfo" :inline="true" label-width="100px"
                      size="medium" label-position="top">
                      <el-form-item label="用户名  （必填）" prop="UserName">
                        <input type="hidden" v-model="UserInfo.pk_User" />
                        <el-input v-model="UserInfo.UserName" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="电话">
                        <el-input v-model="UserInfo.Phone1" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="真实姓名（必填）" prop="FullName">
                        <el-input v-model="UserInfo.FullName" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="昵称">
                        <el-input v-model="UserInfo.NickName" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="Email">
                        <el-input v-model="UserInfo.Email1" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="地址">
                        <el-input v-model="UserInfo.Address1" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="学历">
                        <el-input v-model="UserInfo.Education" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="毕业院校">
                        <el-input v-model="UserInfo.School" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="身份证号" prop="IDNumber">
                        <el-input v-model="UserInfo.IDNumber" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="银行账号">
                        <el-input v-model="UserInfo.BankAccount" placeholder=""></el-input>
                      </el-form-item>
                      <el-form-item label="性别" prop="Sex">
                        <el-select style="width:100%;" v-model="UserInfo.Sex" placeholder="">
                          <el-option :value="0" label="男"></el-option>
                          <el-option :value="1" label="女"></el-option>
                        </el-select>

                      </el-form-item>
                      <el-form-item label="生日" prop="Birthday">
                        <el-date-picker style="width:100%;" v-model="UserInfo.Birthday" type="date" placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="新的密码">
                        <el-input type="password" v-model="LPwd" placeholder="输入密码"></el-input>
                      </el-form-item>
                      <el-form-item label="确认密码">
                        <el-input type="password" v-model="NPwd" placeholder="确认密码"></el-input>
                      </el-form-item>
                      <el-form-item label="签名" class="Mytextarea">
                        <el-input placeholder="展示你的个性吧~" v-model="UserInfo.Note" type="textarea" :rows="5"></el-input>
                      </el-form-item>
                    </el-form>
                    <div style="padding-bottom:10px;">
                      <div
                        style="padding:10px 0 10px 0;border-bottom:1px solid #BFBFBF;margin-bottom:10px;color:#606266;">
                        <span>头像</span><span>（点击即可更换）</span>
                        <input type="hidden" v-model="UserInfo.ImagePath1" />
                      </div>
                      <el-upload class="avatar-uploader" action="/HrApi/Update/UpLoad" :show-file-list="false"
                        :on-success="HeadSuccess">
                        <el-avatar :size="100" v-if="imageUrl" :src="imageUrl"></el-avatar>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div>
                          <!-- <el-button type="primary" size="mini">上传头像</el-button> -->
                        </div>
                        <!-- <img style="border:1px solid red;padding:2px;" v-if="imageUrl" :src="imageUrl" class="avatar"> -->
                      </el-upload>
                    </div>
                    <div style="padding-top:10px;border-top:1px solid #BFBFBF;">
                      <el-button size="small" type="primary" @click="UpdateInfo('UserInfo')" icon="el-icon-check">保存信息
                      </el-button>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 修改便签弹出层 -->
    <el-dialog title="便签" @open="MemoOpen" :lock-scroll="false" :visible.sync="MemoDialog">
      <el-form :rules="rules" ref="MemoForm" :model="Memo" size="small">
        <el-form-item label="">
          <el-input v-model="Memo.Title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="" prop="Description">
          <el-input v-model="Memo.Description" type="textarea" :rows="5" placeholder="标签内容..."></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-check" @click="UpdateMemo('MemoForm')">保存</el-button>
          <el-button @click="MemoDialog=false" icon="el-icon-close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.ProfileMyCls {
  // 选项卡配置
  .el-tabs--border-card {
    box-shadow: none;
    border-radius: 0 0 10px 5px;
    .el-tabs__header {
      background: white;
    }
    .el-tabs__item {
      border-top: 3px solid white;
      font-size: 13px;
    }
    .is-active {
      border-top-color: #208adb;
    }
  }
}
.MyConfig {
  .el-form-item {
    width: 48%;
  }
  .Mytextarea {
    width: 100%;
    .el-form-item {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.Memo_Card {
  font-size: 14px;
  background: #ffffe0;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  &:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  .Card_Top {
    line-height: 30px;
    border-bottom: 1px solid #e4e7ed;
    color: #989898;
    .Title {
      color: black;
      font-size: 16px;
    }
    .MemoClose {
      //font-weight: bold;
      &:hover {
        cursor: pointer;
        font-weight: 900;
      }
    }
  }
  .Card_Content {
    line-height: 25px;
    padding: 10px 0 10px 10px;
    color: #767676;
  }
  .Card_Footer {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #e4e7ed;
    line-height: 30px;
    color: #989898;
    .Footer_Edit {
      float: right;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.user_left_card {
  border: 1px solid #e6eaee;
  border-radius: 5px;
  border-top: 2px solid #208adb;
  padding: 10px;
  background: white;
  // 用户信息
  .userinfo_card {
    div {
      border-bottom: 1px solid #e5e5e5;
    }
    .top_img_div {
      text-align: center;
      p {
        padding-bottom: 10px;
        color: #828486;
        line-height: 30px;
        span[name="userName"] {
          color: black;
        }
      }
    }
    .content_div {
      padding: 10px 0;
      //color: #3c434a;
      font-size: 13px;
      font-weight: bolder;
      color: #333333;
      &:last-child {
        text-align: center;
        button {
          width: 100%;
          font-weight: bold;
        }
      }
    }
  }
  //基本信息
  .info_ul {
    padding-left: 5px;
    font-size: 15px;
    li {
      line-height: 45px;
      padding: 10px 0 10px 0;
      border-bottom: 1px solid #eeeeee;
      p {
        line-height: 28px;
        span[name="title"] {
          font-weight: bolder;
        }
        span[name="content"] {
          color: #787777;
        }
      }
    }
  }
}
.NoMemo {
  text-align: center;
  color: #bfc4cd;
  padding: 150px 0px 150px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  data () {
    return {
      MemoInfo: {},
      page: 1,
      Term: '',
      MemoDialog: false,
      Memo: {},
      UserInfo: {},
      imageUrl: '',
      loading: false,
      Type: 'Add',
      LPwd: "",
      NPwd: "",
      //表单验证
      rules: {
        UserName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        FullName: [
          { required: true, message: '真实不能为空', trigger: 'blur' }
        ],
        IDNumber: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' }
        ],
        Sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        Birthday: [
          { required: true, message: '生日不能为空', trigger: 'blur' }
        ],
        Description: [
          { required: true, message: '便签内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    GetMemo () {
      //拉取便签数据
      this.$axios({
        url: '/HrApi/DashboardMange/GetMemoList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 5,
          Term: this.Term,
          pk_User: this.$store.state.UserInfo.pk_User
        }
      }).then(res => {
        if (!res.data.code) {
          this.MemoInfo = res.data.data
        }
      })
    },
    //获取用户个人信息
    GetUser () {
      this.$axios({
        url: '/HrApi/DashboardMange/GetUserListInfo',
        method: 'GET',
        params: {
          pk_User: this.$store.state.UserInfo.pk_User
        }
      }).then(res => {
        if (!res.data.code) {
          this.UserInfo = res.data.data
        }
      })
    },
    MemoOpen () {
      //弹出层open方法

    },
    //删除便签
    DelMemo (id, index) {
      this.$axios({
        url: '/HrApi/DashboardMange/DelMemo',
        method: 'POST',
        data: this.$Qs.stringify({
          pk_Memo: id
        })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          //重新拉取便签信息
          if (this.MemoInfo.Count === 1) {
            this.page = this.page > 1 ? this.page - 1 : 1
          }
          this.GetMemo()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //修改便签
    UpdateMemo (MemoForm) {
      // if (this.Memo.Description.length == 0) {
      //   this.$notify({
      //     title: '提醒',
      //     message: '便签内容不能为空',
      //     type: 'warning',
      //     duration: 1500
      //   });
      //   return
      // }
      this.$refs[MemoForm].validate((valid) => {
        if (!valid) {
          return false;
        }

        //修改便签
        this.$axios({
          url: '/HrApi/DashboardMange/UpdateMemo',
          method: 'POST',
          data: this.$Qs.stringify({
            Memo: JSON.stringify(this.Memo),
            Type: this.Type,
            pk_User: this.$store.state.UserInfo.pk_User
          })
        }).then(res => {
          if (!res.data.code) {
            this.MemoDialog = false
            if (this.Type == "Add") {
              this.$message.success("添加成功")
              this.GetMemo()
              return
            }
            this.$message.success('修改成功')
            //重现拉取数据
            this.GetMemo()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    //头像上传成功回调
    HeadSuccess (res, file) {
      if (!res.code) {
        //执行修改操作
        this.$axios({
          url: '/HrApi/DashboardMange/UpdateImg',
          method: 'POST',
          data: this.$Qs.stringify({
            pk_User: this.$store.state.UserInfo.pk_User,
            URL: res.data
          })
        }).then(r => {
          if (!r.data.code) {
            this.$store.dispatch('SetUserImg', r.data.data)
            setTimeout(() => {
              this.imageUrl = URL.createObjectURL(file.raw);
            }, 100);
            this.$message.success("头像上传成功")
          }
        })

      }
    },
    //修改用户信息
    UpdateInfo (UserForm) {
      //表单验证
      //表单验证
      this.$refs[UserForm].validate((valid) => {
        if (!valid) {
          return false;
        }
        //判断新旧密码
        if (this.LPwd !== this.NPwd) {
          this.$notify({
            title: '警告',
            message: '新旧密码不一致',
            type: 'warning'
          });
          return;
        } else {
          if (this.LPwd.length) {
            //给密码赋值
            this.UserInfo.Password = this.LPwd
          }
        }
        //执行请求
        this.$axios({
          url: '/HrApi/DashboardMange/UpdateUserInfo',
          method: 'POST',
          data: this.$Qs.stringify({
            UserInfo: JSON.stringify(this.UserInfo),
            pk_User: this.$store.state.UserInfo.pk_User
          })
        }).then(res => {
          if (!res.data.code) {
            //修改成功
            this.$message.success(res.data.msg)
            //执行之后的操作
            this.LPwd = this.NPwd = "";
            this.UserInfo = res.data.data;
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    //添加便签
    AddMemo () {
      //清空表单
      this.Memo = {}
      this.Type = "Add"
      this.MemoDialog = true;
    }
  },
  mounted () {
    //获取便签和用户数据
    this.GetMemo()
    this.GetUser()
    this.imageUrl = 'data:image/jpeg;base64,' + this.$store.state.UserInfo.ImageData
  },
  watch: {
    page () {
      this.GetMemo()
    }
  },
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt;
    }
  }
}
</script>